<template>
  <div class="sale">
    <div class="sale_l">
      <div class="sale_l_t">
        <div class="l_t_item">
          <img src="@/assets/home/22.png" alt="" />
          今日销售额
        </div>
        <div class="flex flex_le">
          <div class="money">￥ 523,230</div>
          <div class="flex a-l-c flex_lr">
            <img src="@/assets/home/23.png" alt="" />
            35% 增长
          </div>
        </div>
      </div>
      <div class="sale_l_c">
        <div class="le_box">今天采购额</div>
        <div>￥ 1,235</div>
      </div>
      <div class="sale_l_c">
        <div class="le_box_b">今日流水</div>
        <div>￥ 23,3,20</div>
      </div>
    </div>
    <div class="sale_r">
      <hc-home-title :title="'销售情况'" />
      <div class="line" ref="line"></div>
    </div>
  </div>
</template>

<script setup>
import hcHomeTitle from "@/components/hc-home/index.vue";
import { ref, reactive, onMounted, nextTick, onUnmounted, onBeforeUnmount } from "vue";
import { linfn } from "./line.js";
const line = ref();

onMounted(() => {
  // console.log(123123);
  setTimeout(() => {
    nextTick(() => {
      try {
        linfn(line?.value, [10, 260, 40, 280, 290, 110, 241]);
      } catch {}
    });
  }, 500);
});
</script>

<style lang="less" scoped>
.sale {
  margin-top: 15px;
  display: flex;
}

.sale_l {
  width: 445px;
  margin-right: 15px;
}

.sale_r {
  background-color: #fff;
  flex: 1;
  border-radius: 6px;
  padding: 10px 10px 0 15px;
  max-height: 270px;
}

.sale_l_t {
  width: 100%;
  height: 120px;
  background-image: url("@/assets/home/21.png");
  background-repeat: no-repeat;
  border-radius: 6px;
  color: #fff;
  background-color: #7e5bfd;
}

.l_t_item {
  padding: 15px;
}

.money {
  font-size: 28px;
  margin-left: 20px;
  margin-right: 20px;
}

.flex_le {
  margin-top: 10px;
  align-items: center;
}

.flex_lr {
  font-size: 14px;
}

.sale_l_c {
  background-color: #fff;
  margin-top: 15px;
  height: 60px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 10px;
}

.le_box {
  color: #ef771e;
  padding-left: 20px;
  position: relative;
}

.le_box::after {
  display: block;
  content: "";
  width: 2px;
  height: 15px;
  background-color: #ef771e;
  position: absolute;
  top: 6px;
  left: 5px;
}

.le_box_b {
  color: #9152fe;
  padding-left: 20px;
  position: relative;
}

.le_box_b::after {
  display: block;
  content: "";
  width: 2px;
  height: 15px;
  background-color: #9152fe;
  position: absolute;
  top: 6px;
  left: 5px;
}

.line {
  margin-top: 10px;
  max-height: 220px;
  height: 220px;
  overflow: hidden;
}
</style>
